<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>一只爬虫，爬遍鲁东</title>
        <meta charset="UTF-8">
  
        <!-- <script src="js/jquery-1.10.2.js"></script> -->
        <script src="http://ovefvi4g3.bkt.clouddn.com/spider.js"></script>
        <script src="http://ovefvi4g3.bkt.clouddn.com/jquery-1.10.2.js"></script>
    </head>

    <style>
        body
        {
            background-image: url('http://ovefvi4g3.bkt.clouddn.com/crawl_bg.jpg');
            text-align: center; 
            background-color: #191919;
        }
        p
        {
            font-family: Verdana, Geneva, Tahoma, sans-serif;
        }
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        #box {
            position: relative;
            width: 1050px;
            height: 360px;
            margin: 100px auto 10px;
        }
        #box ul li {
            position: absolute;
            left: 0;
            top: 0;
            width: 1050px;
            height: 360px;
            display: none;
        }

        #show {
            position: absolute;
            left: 0;
            top: 0;
            width: 1050px;
            height: 360px;
            perspective: 800px; /*井深*/
            display: none;
        }

        #show div {
            position: relative;
            width: 525px;
            height: 72px;
            float: left;
            transform-style: preserve-3d; /*创遭3d环境*/
        }

        #show div em {
            position: absolute;
            left: 0;
            top: 0;
            display: block;
            width: 525px;
            height: 72px;
        }

        #show div .em1 {
            /*前面*/
            background: url("http://ovefvi4g3.bkt.clouddn.com/lun1.JPG");
            transform: translateX(5px);
        }

        #show div .em2 {
            /*后面*/
            background: url("http://ovefvi4g3.bkt.clouddn.com/lun2.JPG");
            transform: translateZ(-5px) rotateX(-180deg);
        }

        #show div span {
            position: absolute;
            right: 0;
            bottom: 0;
            background-color: #999;
        }

        #show div span.span1 {
            width: 10px;
            height: 72px;
            transform-origin: right;
            transform: translateZ(-5px) rotateY(-90deg);
        }

        #show div span.span2 {
            width: 525px;
            height: 10px;
            transform-origin: bottom;
            transform: translateZ(-5px) rotateX(-90deg);
        }

        #show div.div2 .span1 {
            left: 0;
            transform-origin: left;
            transform: translateZ(5px) rotateY(90deg);
        }
        /*规定左前动画旋转特效*/
        @keyframes move1{
            0%{
                transform: rotateX(0deg) rotateZ(0deg) rotateY(0deg);
                animation-timing-function: ease;/*运动速度曲线*/
            }
            60%{
                transform: rotateX(0deg) rotateZ(0deg) rotateY(-60deg);
                animation-timing-function: ease-in;/*运动速度曲线*/
            }
            80%{
                transform: rotateX(90deg) rotateZ(10deg) rotateY(-45deg);
                animation-timing-function: ease-out;/*运动速度曲线*/
            }
            100%{
                transform: rotateX(180deg) rotateZ(0deg) rotateY(0deg);
            }
        }
        @keyframes  move2{
            0%{
                transform: rotateX(0deg) rotateZ(0deg) rotateY(0deg);
                animation-timing-function: ease;/*运动速度曲线*/
            }
            60%{
                transform: rotateX(0deg) rotateZ(0deg) rotateY(60deg);
                animation-timing-function: ease-in;/*运动速度曲线*/
            }
            80%{
                transform: rotateX(90deg) rotateZ(-10deg) rotateY(45deg);
                animation-timing-function: ease-out;/*运动速度曲线*/
            }
            100%{
                transform: rotateX(180deg) rotateZ(0deg) rotateY(0deg);
            }
        }      
    </style>
    <body>
        <div align="right">
            <label style="color:rgb(20, 2, 15)">作者：张海陆  班级：20152203301  学号：20152203301</label>
        </div>
        <p style="font-size:25px;color:darkgreen"><strong>欢迎来到爬虫世界，跟我一起爬我的母校吧</strong></p>
        <div id="box">
            <ul>
                <li><img src="http://ovefvi4g3.bkt.clouddn.com/lun1.JPG" alt="pho"/></li>
                <li><img src="http://ovefvi4g3.bkt.clouddn.com/lun2.JPG" alt="pho"/></li>
                <li><img src="http://ovefvi4g3.bkt.clouddn.com/lun3.JPG" alt="pho"/></li>
                <li><img src="http://ovefvi4g3.bkt.clouddn.com/lun4.JPG" alt="pho"/></li>
                <li><img src="http://ovefvi4g3.bkt.clouddn.com/lun5.JPG" alt="pho"/></li>
            </ul>
            <div id="show"></div>
        </div>
        <br>
        <input type="button" id="prev" value="<" style="width:100px;height:30px"/>
        <input type="button" id="next" value=">" style="width:100px;height:30px"/>
        
        <script>
            var oShow = document.getElementById("show");
            var oBox = document.getElementById('box');
            var prev = document.getElementById("prev");
            var next = document.getElementById("next");
            var oLi = oBox.getElementsByTagName("ul")[0].getElementsByTagName("li");
            var oImg = oBox.getElementsByTagName("ul")[0].getElementsByTagName("img");
            oShow.iNow = 0;
            oShow.urls = []; /*当前背景  给oshow对象添加一个自定义属性保存当前显示的图片*/
            oShow.off = false;
            /*保存图片路径*/
            for (var i = 0; i < 5; i++) {
                var oDiv1 = document.createElement("div");
                var oDiv2 = document.createElement("div");
                oDiv2.className = "div2";
                oDiv1.innerHTML = "<em class='em1' style='background-position: 0-" + i * 72 + "px'></em><span class='span1'></span>" +
                        "<em class='em2' style='background-position: 0-" + i * 72 + "px'></em><span class='span2'></span>";
                oDiv2.innerHTML = "<em class='em1' style='background-position: -525px+" + (5 - i) * 72 + "px'></em><span class='span1'></span>" +
                        "<em class='em2' style='background-position: -525px+" + (5 - i) * 72 + "px'></em><span class='span2'></span>";
                oShow.appendChild(oDiv1);
                oShow.appendChild(oDiv2);
            }
            oLi[0].style.display = "block";
            /***********/
            //获取图片
            for (var i = 0; i < oImg.length; i++) {
                oShow.urls.push(oImg[i].getAttribute("src"));
            }
                prev.onclick = function () {
                    if(oShow.off){
                        return; //
                    }
                    oShow.off = true;
                    var iNext = oShow.iNow - 1;
                    if (iNext < 0) {
                        iNext = oShow.urls.length - 1;
                    }
                    tab(iNext);//切换图片
                };
            next.onclick = function () {
                if(oShow.off){
                    return; //
                }
                oShow.off = true;
                var iNext = oShow.iNow + 1;
                if (iNext >= oShow.urls.length) {
                    iNext = 0;
                }
                tab(iNext);//切换图片
            };
            function tab(iNext) {
                var oEm1 = oShow.getElementsByClassName("em1");
                var oEm2 = oShow.getElementsByClassName("em2");
                var oDiv = oShow.getElementsByTagName("div");
                for (var i = 0; i < oEm1.length; i++) {
                    //当前的这一张
                    oEm1[i].style.backgroundImage = "url(" + oShow.urls[oShow.iNow] + ")";
                    //后面的哪一张
                    oEm2[i].style.backgroundImage = "url(" + oShow.urls[iNext] + ")";
                }
                oShow.style.display = "block";
                oLi[oShow.iNow].style.display = "none";
        
                //给具体的十个div绑定定时器  实现旋转效果
                for (var i = 0; i < oDiv.length; i+=2) {
                    var time = (i+1)*50;
                    oDiv[i].style.transform = "rotateX(0deg)";//左边
                    oDiv[i + 1].style.transform = "rotateX(0deg)";//右边
                    //具体每个div绑定定时器
                    setTimer(oDiv[i], time,"move1");
                    setTimer(oDiv[i + 1], time,"move2")
                }
                //动画执行完成之后
                setTimeout(function(){
        
                    oShow.iNow = iNext;
                    oLi[oShow.iNow].style.display = "block";///inext.inow
                    oShow.style.display = "none";
                    oShow.off = false;
                },(oDiv.length*50+1500))
        
            }
            function setTimer(obj,time,name){
                obj.timer = setTimeout(function(){
                    //开启定时器之前先清除定时器
                    clearTimeout(obj.timer);
                    obj.style.animation = name + " 1.5s";
                    obj.style.transform = "rotateX(180deg)";
        
                    obj.timer = setTimeout(function(){
                        obj.style.animation = "";
                        clearTimeout(obj.timer);
                        obj.timer = null;
                    },1500);
                },time)
            }
        </script> 

        <br><br><br>
        <div>
            <input style="width:100px;height:30px" type=button value="了解使用方法" onclick="window.open('https://blog.iamzhl.top/ldu-crawl-based-on-nodejs.html')" />
        </div>
    </body>
</html>
